<!---@component: 表单组件CustomTable------>
<template>
  <el-table
    :style="{ width: tableWith }"
    :data="data"
    :disabled="disabled"
    :border="border"
    :max-height="tableHeight"
    :preserve-expanded-content="preserveExpanded"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="openSelection" type="selection" width="55" fixed />

    <!-- 表格列保持不变 -->
    <template v-for="column in columns" :key="column.prop">
      <el-table-column
        :type="column.type"
        :label="column.label"
        :prop="column.prop"
        :align="column.align"
        :width="column.width"
        :show-overflow-tooltip="column.showTootip"
      >
        <!-- ✅ 表头自定义插槽，用 Tooltip 包裹 label -->
        <template v-if="column.showTooltipHeader" #header>
          <el-tooltip v-if="column.label" effect="dark" :content="column.label" placement="top">
            <span class="cursor-help">
              {{ truncate(column.label) }}
            </span>
          </el-tooltip>
        </template>
        <!-- 展开行内容 -->
        <template v-if="column.type === 'expand'" #default="{ row, $index }">
          <slot name="expand" :row="row" :index="$index" />
        </template>
        <!-- 插槽列 -->
        <template v-else-if="column.slotName" #default="{ row, $index }">
          <slot :name="column.slotName" :row="row" :index="$index" />
        </template>
        <!-- 空值显示 - -->
        <template v-else #default="{ row }">
          {{ row[column.prop] ? row[column.prop] : '-' }}
        </template>
      </el-table-column>
    </template>

    <!-- 操作列 -->
    <el-table-column v-if="hasOperation" label="操作" :width="operationW" align="center" :fixed="fixed">
      <template #default="{ row, $index }">
        <slot name="operation" :row="row" :index="$index" />
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <div v-if="paginationShow" class="pagination-container mt-4 flex justify-end">
    <el-pagination
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :total="total"
      :page-sizes="pageSizes"
      :background="paginationBg"
      layout="sizes, prev, pager, next"
    />
  </div>
</template>

<script setup>
  import { defineProps, defineEmits, ref, watch, computed } from 'vue'

  const props = defineProps({
    data: Array, //表单数据
    columns: {
      //表头数据
      type: Array,
      required: true,
    },
    border: {
      //是否带有纵向边框
      type: Boolean,
      default: false,
    },
    disabled: {
      //禁用表格行的操作
      type: Boolean,
      default: false,
    },
    total: {
      //数据总数
      type: Number,
      // required: true,
    },
    openSelection: {
      //是否开启多选
      type: Boolean,
      default: false,
    },
    tableHeight: {
      //表格高度
      type: Number,
      default: 600,
    },
    tableWith: {
      //表格宽度
      type: String,
      default: '100%',
    },
    initialPageNo: {
      //默认页码
      type: Number,
      default: 1,
    },
    initialPageSize: {
      //默认10条/页
      type: Number,
      default: 10,
    },
    pageSizes: {
      //每页条数选择器的选项
      type: Array,
      default: () => [10, 15, 20, 25],
    },
    operationW: {
      //操作列宽度
      type: Number,
      default: 200,
    },
    hasOperation: {
      //是否开启操作列
      type: Boolean,
      default: false,
    },
    fixed: {
      //操作列固定位置
      type: String,
      default: 'right',
    },
    paginationBg: {
      //分页页码开启背景色
      type: Boolean,
      default: true,
    },
    paginationShow: {
      //是否显示分页
      type: Boolean,
      default: true,
    },
    preserveExpanded: {
      //是否保留展开状态
      type: Boolean,
      default: false,
    },
    headerStrNum: {
      //表头单元格最大显示文字数量
      type: Number,
      default: 8,
    },
    showTootip: {
      //是否开启tooptip
      type: Boolean,
      default: false,
    },
  })

  const emits = defineEmits(['selectionChange', 'currentChange', 'sizeChange'])

  const currentPage = ref(props.initialPageNo)
  const pageSize = ref(props.initialPageSize)

  watch(
    () => props.initialPageNo,
    (newPageNo) => {
      currentPage.value = newPageNo
    }
  )
  watch(
    () => props.initialPageSize,
    (newPageSize) => {
      console.log('newPageSize', newPageSize)
      pageSize.value = newPageSize
    }
  )

  const truncate = (str) => {
    let maxLen = props.headerStrNum
    return str.length > maxLen ? str.slice(0, maxLen) + '...' : str
  }

  // 分页变化处理
  watch(currentPage, (val) => {
    emits('currentChange', val)
  })

  watch(pageSize, (val) => {
    emits('sizeChange', val)
  })

  const handleSelectionChange = (selection) => {
    emits('selectionChange', selection)
  }
</script>

<style lang="scss" scoped></style>
